<template>
  <el-dropdown trigger="click">
    <div class="self-btn icon-btn flex align-items-center">
      <el-avatar :size="30" :src="currentUser.avatar"></el-avatar>
      <i class="el-icon-arrow-down el-icon--right"></i>
    </div>
    <el-dropdown-menu slot="dropdown" class="user-dropdown">
      <el-dropdown-item class="disabled-title">{{ currentUser.nickname }}</el-dropdown-item>
      <el-dropdown-item divided class="a-link-item-self">
        <router-link :to="`/users/${currentUser.id}`">个人主页</router-link>
      </el-dropdown-item>
      <el-dropdown-item class="a-link-item-self">
        <router-link :to="`/${$rp.USERS}/${$rp.SETTINGS}`">设置</router-link>
      </el-dropdown-item>
      <el-dropdown-item divided @click.native="logout">退出系统</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'UserDropdown', // 页头的用户下拉菜单
  computed: {
    ...mapState(['currentUser']),
  },
  methods: {
    ...mapActions(['removeCurrentUser']),
    logout() {
      this.removeCurrentUser();
      this.$message.success('已退出系统');
      this.$root.$emit('routerPush', { path: `/${this.$rp.USERS}/${this.$rp.SIGN_IN}` });
    },
  },
};
</script>

<style></style>
